<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认弹窗</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible1=!visible1">开启</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="modal1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">自定义 title</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible2=!visible2">开启(参数)</t-button>
      <t-button @click="visible3=!visible3">开启(插槽)</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="modal2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">自定义 footer</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible4=!visible4">开启</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="modal3"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">关闭前</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible5=!visible5">开启</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="modal4"><code></code></pre>
    </dd>
  </dl>
  <t-modal v-model="visible1" title="标题">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </t-modal>
  <t-modal v-model="visible2" title="123">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </t-modal>
  <t-modal v-model="visible3">
    <template #title>
      自定义插槽 Title
    </template>
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </t-modal>
  <t-modal v-model="visible4">
    <template #footer>
      <div class="d-f ai-c jc-c pt40">
        <t-button link type="primary" @click="visible4=false">取消</t-button>
        <t-button link type="primary" @click="visible4=false">确定</t-button>
      </div>
    </template>
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </t-modal>
  <t-modal v-model="visible5" :before-close="handleBefore">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </t-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TMessage } from '@/base/directive/TMessage/globalMessage'
import type { TModalBeforeCloseParams } from '@/base/types/components'

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const visible5 = ref(false)

const handleBefore: TModalBeforeCloseParams = (action, done) => {
  if (action === 'define') {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        TMessage.success('成功')
        done(true)
      } else {
        TMessage.warning('失败')
        done(false)
      }
    }, 1000)
  } else {
    done(true)
  }
}

const modal1 = `<t-button @click="visible=!visible">默认弹窗</t-button>
<t-modal v-model="visible" title="标题">
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</t-modal>`
const modal2 = `<t-button @click="visible=!visible">默认弹窗</t-button>
<t-modal v-model="visible" title="标题">
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</t-modal>`
const modal3 = `<t-button @click="visible4=!visible4">开启</t-button>
<t-modal v-model="visible4">
  <template #footer>
    <div class="d-f ai-c jc-c pt40">
      <t-button link type="primary" @click="visible4=false">取消</t-button>
      <t-button link type="primary" @click="visible4=false">确定</t-button>
    </div>
  </template>
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</t-modal>`
const modal4=`<t-button @click="visible5=!visible5">开启</t-button>
<t-modal v-model="visible5" :before-close="handleBefore">
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</t-modal>

import type { TModalBeforeCloseParams } from '@/base/types/components'
const handleBefore: TModalBeforeCloseParams = (action, done) => {
  if (action === 'define') {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        TMessage.success('成功')
        done(true)
      } else {
        TMessage.warning('失败')
        done(false)
      }
    }, 1000)
  } else {
    done(true)
  }
}`
</script>

<style scoped lang="scss">

</style>
